<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>SpinWheel Date Picker</title>

	<script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','SpinWheel']"></script>
	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>

	<script type="text/javascript">
		require([
			"dojo/_base/kernel"
		], function(dojo){
			var lang = location.search.match(/lang=(\w*)/) ? RegExp.$1 : null;
			if(lang){ dojo.locale = lang; }
			require([
				"dojo/_base/window",
				"dojo/dom",
				"dojo/ready",
				"dijit/registry",
				"dojo/_base/xhr",
				"dojox/mobile/parser",
				"dojox/mobile",
				"dojox/mobile/compat",
				"dojox/mobile/SpinWheelDatePicker"
			], function(win, dom, ready, registry){
				var picker, yearSlot, monthSlot, daySlot;
				
				changeLocale = function(){
					win.doc.forms[0].submit();
				}
				gotoToday = function(){
					registry.byId("picker1").reset();
				}
				showSelectedValue = function(){
					var w = registry.byId("picker1");
					document.getElementById("msg").innerHTML =
						w.slots[0].get("value")+ ":" + w.slots[1].get("value") + ":" + w.slots[2].get("value");
				}
				onYearSet = function(){
					if(!picker) picker = registry.byId("picker1");
					if(!yearSlot) yearSlot = picker.slots[0];
					console.log("onYearSet value: " + yearSlot.get("value"));
				}
				onMonthSet = function(){
					if(!picker) picker = registry.byId("picker1");
					if(!monthSlot) monthSlot = picker.slots[1];
					console.log("onMonthSet value: " + monthSlot.get("value"));
				}
				onDaySet = function(){
					if(!picker) picker = registry.byId("picker1");
					if(!daySlot) daySlot = picker.slots[2];
					console.log("onDaySet value: " + daySlot.get("value"));
				}
				ready(function(){
					dom.byId("sel").value = lang;
								
					picker = registry.byId("picker1");
					yearSlot = picker.slots[0];
					monthSlot = picker.slots[1];
					daySlot = picker.slots[2];

					yearSlot.watch("value", function(name, oldVal, newVal){
  						document.getElementById("msg").innerHTML = 
  							"watch value of year slot: oldVal: " + oldVal + " newVal: " + newVal;
					});
					var monthSlot = picker.slots[1];
					monthSlot.watch("value", function(name, oldVal, newVal){
  						document.getElementById("msg").innerHTML = 
  							"watch value of month slot: oldVal: " + oldVal + " newVal: " + newVal;
					});
					var daySlot = picker.slots[2];
					daySlot.watch("value", function(name, oldVal, newVal){
  						document.getElementById("msg").innerHTML = 
  							"watch value of day slot: oldVal: " + oldVal + " newVal: " + newVal;
					});
				});
			});
		});
	</script>

	<style>
	#picker1 {
		margin: 10px auto;
	}
	</style>
</head>
<body style="visibility:hidden;">
	<div data-dojo-type="dojox.mobile.View">
		<form>
			<div data-dojo-type="dojox.mobile.Heading">
				<span data-dojo-type="dojox.mobile.ToolBarButton" onClick="showSelectedValue()" data-dojo-props='label:"OK"'></span>
				<span data-dojo-type="dojox.mobile.ToolBarButton" onClick="gotoToday()" data-dojo-props='label:"Today"'></span>
				<select id="sel" name="lang" onchange="changeLocale()" style="float:left;margin-top:10px;">
					<option value=""></option>
					<option value="ar">ar</option>
					<option value="ca">ca</option>
					<option value="cs">cs</option>
					<option value="da">da</option>
					<option value="de">de</option>
					<option value="el">el</option>
					<option value="en">en</option>
					<option value="en-au">en-au</option>
					<option value="en-ca">en-ca</option>
					<option value="en-gb">en-gb</option>
					<option value="es">es</option>
					<option value="fi">fi</option>
					<option value="fr">fr</option>
					<option value="fr-ch">fr-ch</option>
					<option value="he">he</option>
					<option value="hu">hu</option>
					<option value="it">it</option>
					<option value="ja">ja</option>
					<option value="ko">ko</option>
					<option value="nb">nb</option>
					<option value="nl">nl</option>
					<option value="pl">pl</option>
					<option value="pt">pt</option>
					<option value="pt-pt">pt-pt</option>
					<option value="ro">ro</option>
					<option value="ru">ru</option>
					<option value="sk">sk</option>
					<option value="sl">sl</option>
					<option value="sv">sv</option>
					<option value="th">th</option>
					<option value="tr">tr</option>
					<option value="zh">zh</option>
					<option value="zh-hant">zh-hant</option>
					<option value="zh-hk">zh-hk</option>
					<option value="zh-tw">zh-tw</option>
				</select>
			</div>
			<div id="picker1" data-dojo-type="dojox.mobile.SpinWheelDatePicker"
				onYearSet="onYearSet()" onMonthSet="onMonthSet()" onDaySet="onDaySet()">
			</div>
			<div id="msg"></div>
		</form>
	</div>
</body>
</html>
